<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .query{
            border:1px solid #ccc;
            margin-bottom: 5px;
            height: 30px;
            padding-top:4px;
            padding-left:4px;
            text-align:center;
        }
        table{
            width:100%;
        }
        table,td,th{
            border:1px solid #ccc;
            border-collapse:collapse;
        }
        td{
            text-align:center;
        }
        tbody tr:nth-child(2){
            background-color: aliceblue;
        }
        tbody tr:hover{
            background-color:#f7fd82;
            cursor: pointer;
        }
        .gbtn_curd{
            float: left;
        }
        .gbtn_page{
            float: right;
        }
        #btn_query{
            margin-left:10px;
        }
    </style>
    <script >
           
            function init(){
                document.querySelectorAll(".normalTable tbody")[0].addEventListener("click",(e)=>{
                    let node=e.target.parentNode.firstElementChild.firstElementChild;
                    if(node.checked==true){
                        node.checked=false;
                    }else{
                        node.checked=true;
                    }
                },false);


                 document.getElementById("allCheck").addEventListener("change",()=>{
            let flag=document.getElementById("allCheck").checked;
            let arrays=document.getElementsByName("trCheck");
            arrays.forEach((item)=>{
                item.checked=flag;
            });
        },false);

        
                document.getElementById("xinzheng").addEventListener("click",()=>{
                    document.getElementById("insertUser").hidden=false;
                    document.querySelector(".normalTable").hidden=true;
            },false);

                document.getElementById("insertUser_btnReturn").addEventListener("click",()=>{
                        document.querySelector(".normalTable").hidden=false;
                        document.getElementById("insertUser").hidden=true;
                },false);




     
            document.querySelector("#myTbody").addEventListener("dblclick",(event)=>{
                    let currentNode=event.target;     //获取被双击的格子
                    let input=document.createElement("input"); //创建一个文本框
                    input.type="text";
                    input.value=currentNode.innerHTML;
                    input.size=input.value.length;
                    input.addEventListener("blur",(event)=>{         //失去焦点时
                        let pn=event.target.parentNode;             //
                        pn.innerHTML=event.target.value;            //被选中的表格的内容替换为input标签里的值
                    },false);
                    currentNode.innerHTML="";        //选择的表格内容清空
                    currentNode.appendChild(input);  //添加input标签
                    input.focus();    //input获得焦点

            },false);
            
        //     document.getElementById("myTbody").addEventListener("dblclick",(event)=>{
        //     let currentNode=event.target;   //获取被双击格子
        //     let input=document.createElement("input");  //创建一个文本框
        //     input.type="text";
        //     input.value=currentNode.innerHTML;
        //     input.size=input.value.length;
        //     //设定文本框丢失焦点时消失，并同时将文本框中的数据添入td。
        //     input.addEventListener("blur",(event)=>{
        //         let pn=event.target.parentNode;
        //         pn.innerHTML=event.target.value;
        //     },false);
        //     currentNode.innerHTML="";
        //     currentNode.appendChild(input);     //将文本框作为currentNode元素的子元素追加 
        //     input.focus();      //解决没法获取焦点bug.
        // },false);

        }
        window.addEventListener("load",init,false);

         $(function(){
                $("#xinzheng").click(function () {
                    
                    $(".normalTable").hide();
                });

            });
    </script>
</head>
<body>
    <nav class="query">
        <input type="search" name="keyword"><button id="btn_query">查询</button>
    </nav>
    <section id="insertUser" hidden>
        <table class="noBorderTable">
            <tr>
                        <td><label for="userName">用户名：</label></td>
                        <td><input type="text" name="userName" id="insertUser_userName"></td>
                    </tr>
                    <tr>
                        <td><label for="userName">昵称：</label></td>
                        <td><input type="text" name="nickName" id="insertUser_nickName"></td>
                    </tr>
                    <tr>
                        <td><label for="userName">密码：</label></td>
                        <td><input type="password" name="password" id="insertUser_password"></td>
                    </tr>
                    <tr>
                        <td><label for="userName">email：</label></td>
                        <td><input type="email" name="email" id="insertUser_email"></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <button id="insertUser_btnReturn">返回</button>
                            <button>提交</button>
                        </td>
                    </tr>
    
        </table>
    </section>
    


    <table class="normalTable">
        <thead>
            <tr>
                <th><input type="checkbox" id="allCheck"></th>
                <th>用户名</th>
                <th>密码</th>
                <th>性别</th>
                <th>email</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="5">
                    <nav class="gbtn_curd">
                        <button id="xinzheng">新增</button>
                        <button id="xiugai">修改</button>
                        <button id="shanchu">删除</button>
                    </nav>
                    <nav class="gbtn_page">
                        首页&nbsp;上一页&nbsp;
                        <select></select>&nbsp;
                        下一页&nbsp;尾页
                    </nav>
                </td>
            </tr>
        </tfoot>
        <tbody id="myTbody">
            <tr>
                <td><input type="checkbox" value="1"></td>
                <td>admin</td>
                <td>admin</td>
                <td>男</td>
                <td>admin@qq.com</td>
            </tr>
            <tr>
                <td><input type="checkbox" value="2"></td>
                <td>test</td>
                <td>test</td>
                <td>女</td>
                <td>test@qq.com</td>
            </tr>
            <tr>
                <td><input type="checkbox" value="3"></td>
                <td>test01</td>
                <td>test01</td>
                <td>女</td>
                <td>test01@qq.com</td>
            </tr>
            <tr>
                <td><input type="checkbox" value="4"></td>
                <td>manager</td>
                <td>manager</td>
                <td>男</td>
                <td>manager@qq.com</td>
            </tr>
        </tbody>
    </table>
</body>
</html>